<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>bootstrap组件</title>

		<!-- Bootstrap -->
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>

		<style type="text/css">
			.progress_width{
				width: 300px;
			}
		</style>
	</head>

	<body>
		<!--图标-->
		<span class="glyphicon glyphicon-search">搜索吧</span>
		<!--图标与按钮结合使用-->
		<button type="button" class="btn btn-default btn-lg">
  			<span class="glyphicon glyphicon-save"></span>下载
		</button>
		
		<!--下拉菜单-->
		<div class="dropdown">
			<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
   			下拉菜单
    			<span class="caret"></span>
 			</button>
			<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#">Action</a>
				</li>
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#">Another action</a>
				</li>
				
				<li role="presentation" class="divider"></li>  <!--分割线-->
				
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#">Something else here</a>
				</li>
				<li role="presentation">
					<a role="menuitem" tabindex="-1" href="#">Separated link</a>
				</li>
			</ul>
		</div>
		
		<!--进度条-->
		<div class="progress progress_width">
			<div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
    		<!--<span class="sr-only">70% Complete</span>-->
    		70%
  			</div>
		</div>

	</body>

</html>